<template>
  <el-dialog
	v-model="dialog.visible"
	:title="dialog.title"
    width="500px"
    destroy-on-close
	@close="closeDialog"
	:close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
	  label-position="top"
    >
	
<!-- 	<el-form-item label="所属上级文件夹" prop="parentId">
	  <el-tree-select
	    v-model="formData.parentId"
	    placeholder="请选择所属上级文件夹"
	    :data="categoryList"
	    filterable
	    check-strictly
	    :render-after-expand="false"
		:props="defaultProps"
	  />
	</el-form-item> -->
	
      <el-form-item prop="name">
        <el-input v-model="formData.name" placeholder="请输入文件夹名称" />
      </el-form-item>
<!--      <el-form-item label="排序号" prop="sort">
        <el-input-number v-model="formData.sort" :min="0" :max="9999" />
      </el-form-item> -->
    </el-form>
    <template #footer>
      <el-button @click="closeDialog" :loading="loading">取消</el-button>
      <el-button type="primary" :loading="loading" @click="handleSubmit">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
	import { ref, reactive, watch,onMounted } from 'vue';
	import type { FormInstance } from 'element-plus';
	import type { SqlCategory } from '@/api/biz/sql';
	import DiskAPI from '@/api/biz/disk';
	import { PropType } from 'vue';
	import {recurOptions} from "@/utils/TreeUtil";
	import { ElMessage } from 'element-plus';
	
	const defaultProps = {
	  children: 'children',
	  label: 'name',
	  value:'id'
	}
	const categoryList = ref<any[]>();
	const emit = defineEmits(['closeDialog']);
	const formRef = ref<FormInstance>();
	const loading = ref(false);
	const dialog = ref({
		visible: false,
		title: '',
	});
	const formData = ref<any>()
	const rules = {
	  name: [{ required: true, message: '请输入文件夹名称', trigger: 'blur' }],
	};

	async function openDialog(row?: any, type?: string) {
		dialog.value = {
			visible: true,
			title: type === 'add' ? '请输入文件夹名称' : '请输入新文件夹名称'
		};
		if (type === 'add') {
			formData.value={
				type:'folder'
			};
			if(row?.parentId){
				formData.value={
					parentId:row?.parentId,
					type:'folder'
				}
			}
		}else{
			formData.value=row;
		}
	}

	const handleSubmit = async () => {
	  await formRef.value?.validate();
	  try {
		if(formData.value?.id && formData.value?.id==formData.value?.parentId){
			 ElMessage.warning("上级不能是当前节点");
			return;
		}
		loading.value = true;
		await DiskAPI.save(formData.value);
		 closeDialog();
	  } finally {
		loading.value = false;
	  }
	};
	
	const closeDialog=()=>{
		dialog.value.visible=false;
		dialog.value.title="";
		emit('closeDialog')
		resetForm();
	}
	/**
	 * 重置表单
	 */
	function resetForm() {
		formRef.value?.resetFields();
		formRef.value?.clearValidate();
		formData.value={};
	}
	
	defineExpose({
	  openDialog,closeDialog
	});

	onMounted(() => {
	});
</script>

<style lang="scss" scoped>
.el-form {
  padding: 20px;
}
</style> 